<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/animate.min.css">
    <link rel="stylesheet" href="../static/css/swiper-bundle.min.css">

    <link rel="stylesheet" href="../static/css/foot.css">
<!--    <link rel="stylesheet" href="../static/css/header.css">-->
    <link rel="stylesheet" href="../static/css/base.css">

    <style>
        @font-face {
            font-family: "zx";
            src: url("../static/font/zx.ttf");
        }

        @font-face {
            font-family: "if2";
            src: url("../static/font/iconfont2.ttf");
        }
        * {
            padding: 0;
            margin: 0;
            text-decoration: none;
        }

        .box {
            margin: 0 50px;
        }

        @font-face {
            font-family: "hh";
            src: url("../static/font/iconfont.ttf");
        }

        .iconfont {
            font-family: "hh";
            font-size: 18px;
        }

        .title {
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80px;
            position: sticky;
            z-index: 3;
            top: 0;
        }

        .title-menu > a, .call > a {
            text-decoration: none;
        }

        .title-logo > :nth-child(1) {
            width: 235px;
            height: 50px;
            margin-right: 10px;
        }

        .title-logo {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .title-menu {
            margin-left: 350px;
        }

        .title-menu > a {
            color: #333;
            font-size: 16px;
            margin: 0 40px 0 0;
        }
        .title-menu > a:hover{
            color: #3388ff;
        }


        .title > .call > a {
            display: inline-block;
            background-color: #3388ff;
            width: 140px;
            height: 40px;
            font-size: 16px;
            text-align: center;
            line-height: 40px;
            border-radius: 2px;
            color: #fff;
        }
        .title > .call > a:hover{
            background-color: #125ab3;
        }

        .logo1 > img {
            width: 100%;
        }

        .swiper-wrapper > .swiper-slide > img {
            width: 100%;
            height: 600px;
        }

        .swiper {
            width: 100%;
            height: 600px;
            /*border: 2px solid red;*/
            margin: 0 auto;
        }

        .pdesc > h3 {
            margin: 30px 0 0 0;
            font-size: 30px;
            color: #000;
            text-align: center;
            font-weight: 500;
        }

        .pdesc > p {
            color: #999;
            font-size: 16px;
            text-align: center;
            margin: 15px 0 30px 0;
        }

        .list {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
        }

        li {
            list-style-type: none;
        }

        .list > li > img {
            height: 138px;
            width: 184px;
        }

        .list > li > p {
            color: #333;
            font-size: 18px;
            padding: 18px;
        }

        .list > li {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .list > li:hover {
            cursor: pointer;
            box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.13);
        }

        .list > li:hover > img {
            transition: all 0.5s;
            transform: scale(1.1);
        }

        .more, .more1 {
            display: block;
            width: 490px;
            height: 60px;
            margin: 40px auto;
            border: 1px solid #d8d8d8;
        }

        .more > div, .more1 > div {
            width: 100%;
            height: 60px;
            line-height: 60px;
            font-size: 20px;
            color: #666;
            text-align: center;
        }

        .more > div:hover, .more1 > div:hover {
            background-color: #3388ff;
            color: white;
        }

        .pdesc2 {
            background-color: #f8f8f8;
        }

        .pdesc2 > h3, .pdesc3 > h3 {
            color: #333;
            font-size: 30px;
            text-align: center;
            margin-top: 120px;
            font-weight: 400;
        }

        .pdesc2 > p, .pdesc3 > p {
            color: #999;
            font-size: 16px;
            margin: 15px 0 30px;
            text-align: center;
        }

        .pdesc2-1 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }


        .pdesc2-1-1 {
            border: #ffffff 1px solid;
            border-radius: 8px;
            margin-right: 16px;
            box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.11);
            /*padding: 30px 25px 25px;*/
        }

        .line1 {
            display: inline-block;
            width: 4px;
            height: 22px;
            line-height: 22px;
            background-color: #3388ff;
        }

        .test {
            display: flex;
            justify-content: space-between;
            position: relative;
            padding: 20px 0 10px 0;
            margin-bottom: 20px;
            /*background-color: red;*/
        }

        .pdesc2-1-1:hover > div > .test > :nth-child(2) {
            color: #3388ff;
        }

        .test > :nth-child(1) {
            position: absolute;
            margin-top: 4px;
        }

        .test > :nth-child(2) {
            position: absolute;
            left: 60px;
            font-size: 22px;
            color: #333;
            font-weight: bold;
        }

        .tan {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .tan > img {
            width: 336px;
            height: 189px;
            margin-bottom: 20px;
        }

        .tan > div {
            width: 336px;
            height: 50px;
            color: #666;
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 8px;
        }

        .tan > p {
            width: 336px;
            text-align: left;
            color: #999;
            margin: 10px 0 15px 0;
        }


        .pdesc3 {
            margin-bottom: 40px;
        }

        .pdesc3-1 {
            width: 1190px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(6, 190px);
            grid-template-rows: repeat(2, 1fr);
            align-items: center;
            text-align: center;
            gap: 0.625em;
        }

        .pdesc3-1 > div {
            box-sizing: border-box;
            width: 190px;
            height: 190px;
            border: 1px solid #eee;;
            border-radius: 2px;
            padding: 20px;

        }

        .pdesc3-1 > div > img {
            width: 148.4px;
            height: 92.59px;
        }

        .pdesc4 {
            width: 100%;
            height: 514px;
            background-image: url("https://jmy-pic.baidu.com/0/pic/-1848497671_-1522004389_1920427982.jpg");
            position: relative;
        }

        .pdesc4-1 {
            background-color: #fff;
            position: absolute;
            width: 500px;
            height: 434px;
            margin: 40px 0 40px 0;
            border: 1px solid #eee;
            border-radius: 0.625em;
            right: 40px;
        }

        .pdesc4-1-1 {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        .pdesc4-1-1 > :nth-child(1) {
            color: #333;
            font-size: 23px;
        }

        .pdesc4-1-1 > :nth-child(2) > label > input, .pdesc4-1-1 > :nth-child(3) > label > input {
            width: 350px;
            height: 60px;
        }

        .pdesc4-1-1 > :nth-child(4) > a {
            display: block;
            width: 350px;
            height: 60px;
            background-color: #3388ff;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-size: 20px;
        }

        .input-placeholder {
            background-color: #f5f5f5;
            border: 1px solid #fff;
            border-radius: 2px;
        }

        .input-placeholder:hover {
            background-color: #e5e7eb;
        }


        /*伪元素设置*/
        .input-placeholder::placeholder {
            font-size: 16px;
            padding-left: 20px;
            color: #9ca3af;
        }

        .pdesc5 {
            height: 530px;
            position: relative;
            margin-bottom: 30px;
            background-image: url("https://jmy-pic.baidu.com/0/pic/-344946005_755920174_-1635702536.jpg");
        }
        .pdesc5-0{
            position: absolute;
            top: 180px;
            left: 150px;
        }

        .pdesc5-1 {
            position: absolute;
            display: block;
            width: 250px;
            height: 39.2px;
            color: #fff;
            font-size: 30px;
            font-weight: 500;
            /*background-color: red;*/
        }

        .pdesc5-2 {
            position: absolute;
            top: 40px;
        }

        .pdesc5-2-1 {
            display: flex;
            align-items: center;
            margin: 18px 0 18px 0;
        }

        .pdesc5-2-1 > div, .pdesc5-2-1 > span {
            color: #fff;
            font-size: 16px;
            width: 90px;
            /*background-color: red;*/
        }
        .pdesc5-2-1 > span{
            display: block;
            width: 340px;
            text-align: left;
        }
        .pdesc5-3{
            position: absolute;
            width: 640px ;
            height: 254px;
            background-color: red;
            background-image: url("../static/image/location.png");
            top: 150px;
            right: 150px;
            cursor: url("https://api.map.baidu.com/images/openhand.cur") 8 8, default;
        }


    </style>
    <link rel="stylesheet" href="../static/css/right-buttom.css">
</head>
<body>
<div class="box">
    <div class="title">
        <div class="title-logo">
            <img src="https://jmy-pic.baidu.com/0/pic/-1717994753_-1685692204_-430591867.png" alt=""/>
            <img src="https://fe-resource.cdn.bcebos.com/groot/mip-sjh-merchant-info/icon-safeguard.svg" alt=""/>
        </div>
        <div class="title-menu">
            <a href="http://localhost:1234/index1.html">首页</a>
            <a href="http://localhost:1234/index2.html">瑞安服务</a>
            <a href="http://localhost:1234/pageOne.html">瑞安优势</a>
            <a href="http://localhost:1234/index4.html">医务系统</a>
            <a href="http://localhost:1234/index5-1.html">客户案例</a>
            <a href="http://localhost:1234/index6.html">关于我们</a>
        </div>
        <div class="call">
            <a class="iconfont" href="#">&#xe654;&nbsp;免费回电</a>
        </div>
    </div>
    <div class="logo1">
        <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img
                        src="https://jmy-pic.baidu.com/0/pic/-1446485451_116616339_1014376691.jpg" alt=""/></div>
                <div class="swiper-slide"><img
                        src="https://jmy-pic.baidu.com/0/pic/-113028785_-628613927_1267003081.jpg" alt=""/></div>
                <div class="swiper-slide"><img
                        src="https://jmy-pic.baidu.com/0/pic/1103718663_-1384408826_-1335616220.jpg" alt=""/></div>
                <div class="swiper-slide"><img
                        src="https://jmy-pic.baidu.com/0/pic/-1578561046_-216022255_210463227.jpg" alt=""/></div>
                <div class="swiper-slide"><img
                        src="https://jmy-pic.baidu.com/0/pic/1784136962_1167217481_1022370475.jpg" alt=""/></div>
            </div>

            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <!--<div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>-->

            <!-- 如果需要滚动条 -->
            <!--<div class="swiper-scrollbar"></div>-->
            <!--<div class="swiper-button-prev"></div>
               <div class="swiper-button-next"></div>&ndash;&gt;&ndash;&gt;-->

            <script>
                var mySwiper = new Swiper('.swiper', {
                    // direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },

                    // 如果需要前进后退按钮
                    /* navigation: {
                         nextEl: '.swiper-button-next',
                         prevEl: '.swiper-button-prev',
                     },*/

                    // 如果需要滚动条
                    /* scrollbar: {
                         el: '.swiper-scrollbar',
                     },*/
                })
            </script>
        </div>
        <img src="https://jmy-pic.baidu.com/0/pic/-1235705118_911821319.jpg" alt=""/>
        <img src="https://jmy-pic.baidu.com/0/pic/-1637389020_-485802292_115238925.jpg" alt=""/>
        <img src="https://jmy-pic.baidu.com/0/pic/1914405021_-11251374.jpg" alt=""/>
        <img src="https://jmy-pic.baidu.com/0/pic/-651119986_381845750.jpg" alt=""/>
        <img src="https://jmy-pic.baidu.com/0/pic/-1683326659_2076261613.jpg" alt=""/>
    </div>
    <div class="pdesc">
        <h3>产品中心</h3>
        <p>以客户需求和产品发展理念为驱动力</p>
    </div>
    <div>
        <ul class="list animate__animated animate__backInRight">
            <li>
                <img src="https://jmy-pic.baidu.com/0/pic/1048019221_1745820387_-523216286.jpg" alt=""/>
                <p>全国布局</p>
            </li>
            <li>
                <img src="https://jmy-pic.baidu.com/0/pic/-438591880_-529165658.jpg" alt=""/>
                <p>健全的服务体系</p>
            </li>
            <li>
                <img src="https://jmy-pic.baidu.com/0/pic/-1957759545_-2139051158.png" alt=""/>
                <p>瑞安文库</p>
            </li>
            <li>
                <img src="https://jmy-pic.baidu.com/0/pic/-1071676095_668725092.jpg" alt=""/>
                <p>专业医务系统</p>
            </li>
            <li>
                <img src="https://jmy-pic.baidu.com/0/pic/1347890392_-1166272044.jpg" alt=""/>
                <p>团队体系</p>
            </li>
            <li>
                <img src="https://jmy-pic.baidu.com/0/pic/-405172543_584952375.jpg" alt=""/>
                <p>企业定制</p>
            </li>
        </ul>
    </div>
    <a class="more" href="https://isite.baidu.com/site/wjzpjym6/76418a41-c1a0-4c61-8c8f-5d0995468892?fid=nH04rHb1PHTvnj04nHTsnHnvnWwxnWcdg1D&ch=4&bd_vid=11217902078558577431&bd_bxst=EiaKXnfh0ZpwGuW900DD0Z-pw07gzzIc000000zqCTMV8I10eTpq1260000000000006nWfsfbuDwW01nWR4wWfYnb7DfWwKn1cLPbPaPDDvwWgCZbs7C-JFkf0000akAg9bKf000A8xEUtR0000afar001Atq2dEpZFeUMTsrYRz5as_V2qsTUAtq2dEpZFeUMTsrY000aNWT4b&title=%E4%BA%A7%E5%93%81%E4%B8%AD%E5%BF%83&uniqId=d86e160bd16a4fe5af901f449a65cfe1&productGroupsId=-2">
        <div>查看更多产品</div>
    </a>
    <div class="pdesc2">
        <h3>新闻中心</h3>
        <p>你可以及时了解公司以及公司产品的相关动态</p>
        <div class="pdesc2-1">
            <a class="pdesc2-1-1" href="#">
                <div>
                    <div class="test">
                        <span class="line1"></span>
                        <span>全球布局</span>
                    </div>
                    <div class="tan">
                        <p>2021-10-09 09:18:25</p>
                        <div>国内核心城市均设有分支机构，深圳/广州/北京/上海/杭州/成都等，服务超过13个城市。</div>
                        <img src="https://jmy-pic.baidu.com/0/pic/2038112247_1244923475_1109016992.jpg" alt=""/>
                    </div>
                </div>
            </a>
            <a class="pdesc2-1-1" href="#">
                <div>
                    <div class="test">
                        <span class="line1"></span>
                        <span>健全的服务体系</span>
                    </div>
                    <div class="tan">
                        <p>2021-10-09 09:18:25</p>
                        <div>服务板块涵盖诊疗、企业健康风险管控、健康文化建设等；
                            服务内容包括：企业医务室的筹建与运营管理、企业理疗室、
                            企业健身房、企业急救体系建设、企业福利药品供应、
                            职工慢性病管理与心血管高风险人群管理等全面综合的职场医疗服务。
                        </div>
                        <img src="https://jmy-pic.baidu.com/0/pic/-1308363241_-513376376_2123768609.jpg" alt=""/>
                    </div>
                </div>
            </a>
            <a class="pdesc2-1-1" href="#">
                <div>
                    <div class="test">
                        <span class="line1"></span>
                        <span>学术标准制定</span>
                    </div>
                    <div class="tan">
                        <p>2021-10-09 09:18:25</p>
                        <div>全国高等学校教材———《职业健康服务与管理》，企业编委单位。</div>
                        <img src="https://jmy-pic.baidu.com/0/pic/2038112247_1244923475_1109016992.jpg" alt=""/>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <a class="more1" href="https://isite.baidu.com/site/wjzpjym6/99948952-5da1-49f7-9008-7568c6ad00ca?fid=nH04rHb1PHTvnj04nHTsnHnvnWwxnWcdg1D&ch=4&bd_vid=11217902078558577431&bd_bxst=EiaKXnfh0ZpwGuW900DD0Z-pw07gzzIc000000zqCTMV8I10eTpq1260000000000006nWfsfbuDwW01nWR4wWfYnb7DfWwKn1cLPbPaPDDvwWgCZbs7C-JFkf0000akAg9bKf000A8xEUtR0000afar001Atq2dEpZFeUMTsrYRz5as_V2qsTUAtq2dEpZFeUMTsrY000aNWT4b&title=%E6%96%B0%E9%97%BB%E4%B8%AD%E5%BF%83&uniqId=bf12e2dd50f448e0839510fea57105cc">
        <div>查看更多文章</div>
    </a>
    <div class="pdesc3">
        <h3>部分合作客户</h3>
        <p>呵护栋梁之材，建设健康企业</p>
        <div class="pdesc3-1">
            <div><img src="https://jmy-pic.baidu.com/0/pic/906593776_-519687955_812843243.png" alt=""/></div>
            <div><img src="https://jmy-pic.baidu.com/0/pic/-1546692037_722851836_1485666922.png" alt=""/></div>
            <div><img src="https://jmy-pic.baidu.com/0/pic/1894741237_-548842913_-401289227.png" alt=""/></div>
            <div><img src="https://jmy-pic.baidu.com/0/pic/-833977092_461349133_1376767420.png" alt=""/></div>
            <div><img src="https://jmy-pic.baidu.com/0/pic/-252909930_-1379199302_-1046596447.png" alt=""/></div>
            <div><img src="https://jmy-pic.baidu.com/0/pic/-70028491_-679465620_-1284585846.png" alt=""/></div>
            <div><img src="https://jmy-pic.baidu.com/0/pic/1905955907_-1091880652_435846988.jpg" alt=""/></div>
            <div><img src="https://jmy-pic.baidu.com/0/pic/-1019876593_-218904392_87494307.png" alt=""/></div>
            <div><img src="https://jmy-pic.baidu.com/0/pic/-875382939_-1624396705_-201403902.png" alt=""/></div>
            <div><img src="https://jmy-pic.baidu.com/0/pic/598286007_-2010634538_-1348298923.png" alt=""/></div>
            <div><img src="https://jmy-pic.baidu.com/0/pic/-1587347049_-133024952_1165500044.png" alt=""/></div>
            <div><img src="https://jmy-pic.baidu.com/0/pic/-888335227_1568409895_640810205.png" alt=""/></div>
        </div>
    </div>
    <div class="pdesc4">
        <div class="pdesc4-1">
            <div class="pdesc4-1-1">
                <div>立即咨询服务详情</div>
                <div>
                    <label>
                        <input type="text" placeholder="请输入您的称呼" class="input-placeholder">
                    </label>
                </div>
                <div>
                    <label>
                        <input type="number" size="11" placeholder="请输入手机号" class="input-placeholder">
                    </label>
                </div>
                <div><a href="#">立即咨询</a></div>
            </div>
        </div>
    </div>
    <div class="pdesc5">
        <div class="pdesc5-0">
            <span class="pdesc5-1">联系我们 瑞安医疗</span>
            <ul class="pdesc5-2">
                <div class="pdesc5-2-1">
                    <div>公司地址:</div>
                    <span>广东省深圳市南山区深圳国际创新谷7栋A201</span>
                </div>
                <div class="pdesc5-2-1">
                    <div>邮编:</div>
                    <span>518000</span>
                </div>
                <div class="pdesc5-2-1">
                    <div>邮箱:</div>
                    <span>marketing@ryan-doctor.com</span>
                </div>
                <div class="pdesc5-2-1">
                    <div>联系电话:</div>
                    <span>075526606160</span>
                </div>
            </ul>
        </div>
        <div class="pdesc5-3"></div>
    </div>



    <div class="bottom">
        <div class="bottom-1">
            <a href="https://baozhang.baidu.com/guarantee-pc/#/guaranteeHome">
                <div class="bottom-1-content1">
                    <p class="chara">&#xe606;</p>
                    <div class="small">
                        <span class="hei" >协助维权</span>
                        <span class="dan">承受经济损失，可申请百度协助</span>
                    </div>
                </div>
            </a>
            <a href="https://baozhang.baidu.com/guarantee-pc/#/guaranteeHome">
                <div class="bottom-1-content1">
                    <p class="chara">&#xe650;</p>
                    <div class="small">
                        <span class="hei" >虚假赔偿</span>
                        <span class="dan" >遇到品牌或资质冒用，可申请百度保障</span>
                    </div>
                </div>
            </a>
            <a href="https://baozhang.baidu.com/guarantee-pc/#/guaranteeHome">
                <div class="bottom-1-content1">
                    <p class="chara">&#xe662;</p>
                    <div class="small">
                        <span class="hei" >欺诈赔偿</span>
                        <span class="dan" >遇到欺诈，经核查属实，可申请保障退还费用</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="bottom-2">
            <a class="xx" href="http://localhost:1234/index1.html">首页</a>
            <div class="line"></div>
            <a class="xx" href="http://localhost:1234/index2.html">瑞安服务</a>
            <div class="line"></div>
            <a class="xx" href="http://localhost:1234/pageOne.html">瑞安优势</a>
            <div class="line"></div>
            <a class="xx" href="http://localhost:1234/index4.html">医务系统</a>
            <div class="line"></div>
            <a class="xx" href="http://localhost:1234/index5-1.html">客户案例</a>
            <div class="line"></div>
            <a class="xx" href="http://localhost:1234/index6.html">关于我们</a>
        </div>
        <div class="bottom-3">
            <span class="bbb">Copyright © 深圳市瑞安医疗服务有限公司&nbsp;</span>
            <span class="bbb">地址：广东省深圳市南山区深圳国际创新谷7栋A201</span>
        </div>
    </div>

    <div class="r-b">
        <button class="right-4">
            <span class="t"> &#xe605;</span>
            <span class="wz">免费回电</span>
        </button >
        <button class="right-4">
            <span class="t">&#xe61e;</span>
            <span class="wz">免费咨询</span>
        </button>
        <button class="right-4">
            <span class="t">&#xe681;</span>
        </button>
    </div>
    <div class="callb">
        <a class="iconfont" href="#">&#xe654;&nbsp;拨打电话</a>
    </div>

</div>
</body>
</html>